<template>
  <div>
    <!-- 用toRef -->
    <h2>{{data}}</h2>
    <h2>{{name}}今年{{age}}岁了</h2>
    <button @click="name+='y'">改名了</button>
    <button @click="age++">长大了</button>
    <h2>工作是{{job.jobName}},工资{{job.salary}}K</h2>
    <button @click="job.jobName+='高级'">升职</button>
    <button @click="job.salary++">涨工资</button>
    <button @click="showRawData">原始数据</button>
    <br>
    <h2 v-show="data.car">{{data.car}}</h2>
    <button @click="addCard">一部新车</button>
    <button @click="decPrice">车降价了</button>
  </div>
</template>

<script>
import { ref, reactive, toRef, toRefs, toRaw, markRaw} from 'vue';
export default {
  name: 'Demo',
  setup(){
    let data = reactive({
      name: "rock",
      age: 18,
      job: {
        jobName: "前端工程师",
        salary: 10
      }
    })
    function showRawData(){
        const p = toRaw(data)
				p.age++
				console.log(p)
    }
    function addCard(){
      let car = {name:'奔驰',price:40}
      data.car= markRaw(car)
    }

    function decPrice(){
      data.car.price--
      console.log(data.car.price)
    }
    return{
      data,
      addCard,
      showRawData,
      decPrice,
      ...toRefs(data)  //不能直接toRefs(data)，toRefs(data)是对象，不能返回{对象},需要解构
    }
  },
}
</script>

<style>

</style>
